<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
</head>
<body>
<div id="app">
    <input type="button" @click="mov()" value="mov">
    <input type="button" @click="cls()" value="cls">
    <h4> {{msg}} </h4>
</div>


<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data: {
        msg: "abcdefg ",
        intervalid: null
    },
    methods: { 
        mov(){
            if(this.intervalid != null) return;
            this.intervalid = setInterval( () => {
                var start = this.msg.substring(0, 1);
                var end = this.msg.substring(1);
                this.msg = end + start;
            },500);
            
        },
        cls() {
            clearInterval(this.intervalid);
            this.intervalid = null;
        }
    }
})
</script>
</body>
</html>